---
import GroupOfHorizontalListOfPokemonsVue from "@/components/examples/vue/GroupOfHorizontalListOfPokemons.vue";
import GroupOfHorizontalListOfPokemonsSvelte from "@/components/examples/svelte/GroupOfHorizontalListOfPokemons.svelte";
import { GroupOfHorizontalListOfPokemons as GroupOfHorizontalListOfPokemonsReact} from "@/components/examples/react/GroupOfHorizontalListOfPokemons.tsx";
import PageComponent from "./shared/page-component.astro";
import { getI18N } from "@/i18n";

const { currentLocale } = Astro;
const { framework } = Astro.props;

const i18n = getI18N({ currentLocale });

const horizontalListsVueCode=`
<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";
import type { Pokemon } from "./Pokemon";
import PokemonComponent from "./PokemonComponent.vue";
import { fetchPokemons } from "@/server/pokemonServer";

const pokemons = ref([] as Pokemon[]);
pokemons.value = await fetchPokemons(9);

const pokemon2G = ref([] as Pokemon[]);
pokemon2G.value = await fetchPokemons(9, 151);

const pokemon3G = ref([] as Pokemon[]);
pokemon3G.value = await fetchPokemons(9, 251);

const [ parent ] = useDragAndDrop(pokemons, {
  droppableGroup: "group",
  direction: "horizontal",
  draggingClass: "dragging-pokemon",
});
const [ parent2 ] = useDragAndDrop(pokemon2G, {
  droppableGroup: "group",
  direction: "horizontal",
  draggingClass: "dragging-pokemon",
});

const [ parent3 ] = useDragAndDrop(pokemon3G, {
  droppableGroup: "group",
  direction: "horizontal",
  draggingClass: "dragging-pokemon",
});
</script>
<template>
  <div
    class="flex max-sm:justify-center flex-col gap-4 max-sm:gap-0.5 items-start"
  >
    <div
      ref="parent"
      class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
    >
      <PokemonComponent
        class="min-w-44 max-sm:min-w-32"
        v-for="(pokemon, index) in pokemons"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
      />
    </div>
    <div
      ref="parent2"
      class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
    >
      <PokemonComponent
        class="min-w-44 max-sm:min-w-32"
        v-for="(pokemon, index) in pokemon2G"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
      />
    </div>
    <div
      ref="parent3"
      class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
    >
      <PokemonComponent
        class="min-w-44 max-sm:min-w-32"
        v-for="(pokemon, index) in pokemon3G"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
      />
    </div>
  </div>
</template>
`
const horizontalListSvelteCode =`<script lang="ts">
  import { useDragAndDrop } from "fluid-dnd/svelte";
  import type { Pokemon } from "../Pokemon";
  import PokemonComponent from "@/components/examples/svelte/PokemonComponent.svelte";
  import { fetchPokemons } from "@/server/pokemonServer";

  const pokemons = $state([] as Pokemon[]);
  fetchPokemons(9).then((newPokemons)=>{
    pokemons.push(...newPokemons);
  });

  const pokemon2G = $state([] as Pokemon[]);
  fetchPokemons(9, 151).then((newPokemons)=>{
    pokemon2G.push(...newPokemons);
  });

  const pokemon3G = $state([] as Pokemon[]);
  fetchPokemons(9, 251).then((newPokemons)=>{
    pokemon3G.push(...newPokemons);
  });

  const [ parent ] = useDragAndDrop(pokemons, {
    droppableGroup: "group",
    direction: "horizontal",
    draggingClass: "dragging-pokemon",
    droppableClass:'hover'
  });
  const [ parent2 ] = useDragAndDrop(pokemon2G, {
    droppableGroup: "group",
    direction: "horizontal",
    draggingClass: "dragging-pokemon",
    droppableClass:'hover'
  });

  const [ parent3 ] = useDragAndDrop(pokemon3G, {
    droppableGroup: "group",
    direction: "horizontal",
    draggingClass: "dragging-pokemon",
    droppableClass:'hover'

  });
</script>
<div
  class="flex max-sm:justify-center flex-col gap-4 max-sm:gap-0.5 items-start"
>
  <div
    use:parent
    class="pokemon-generation bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
  >
  {#each pokemons as pokemon, index (pokemon.name)}
    <PokemonComponent
      class="min-w-44 max-sm:min-w-32"
      index={index}
      pokemon={pokemon}
    />
    
  {/each}
  </div>
  <div
    use:parent2
    class="pokemon-generation bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
  >
    {#each pokemon2G as pokemon, index (pokemon.name)}
      <PokemonComponent
        class="min-w-44 max-sm:min-w-32"
        index={index}
        pokemon={pokemon}
      />
      
    {/each}
  </div>
  <div
    use:parent3
    class="pokemon-generation bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
  >
    {#each pokemon3G as pokemon, index (pokemon.name)}
      <PokemonComponent
        class="min-w-44 max-sm:min-w-32"
        index={index}
        pokemon={pokemon}
      />
      
    {/each}
  </div>
</div>`
const horizontalListsReactCode= `
import { useDragAndDrop } from "fluid-dnd/react";
import type { Pokemon } from "../Pokemon";
import { fetchPokemons } from "@/server/pokemonServer";
import { PokemonComponent } from "./PokemonComponent";
import { useEffect } from "react";

export const GroupOfHorizontalListOfPokemons: React.FC = () => {
  const [ parent, listOfPokemons, setPokemons ] = useDragAndDrop<Pokemon, HTMLDivElement>([], {
    droppableGroup: "group",
    direction: "horizontal",
    draggingClass: "dragging-pokemon",
    droppableClass:'hover'
  });
  const [ parent2, listOfPokemons2, setPokemons2 ] = useDragAndDrop<Pokemon, HTMLDivElement>([], {
    droppableGroup: "group",
    direction: "horizontal",
    draggingClass: "dragging-pokemon",
    droppableClass:'hover'
  });
  const [ parent3, listOfPokemons3, setPokemons3 ] = useDragAndDrop<Pokemon, HTMLDivElement>([], {
    droppableGroup: "group",
    direction: "horizontal",
    draggingClass: "dragging-pokemon",
    droppableClass:'hover'
  });
  useEffect(() => { 
      const fetchPokemonse = async () => {
          const newPokemons = await fetchPokemons(9);
          setPokemons(newPokemons);
          const newPokemons2 = await fetchPokemons(9, 151);
          setPokemons2(newPokemons2);
          const newPokemons3 = await fetchPokemons(9, 251);
          setPokemons3(newPokemons3);
      }
      fetchPokemonse();
  }, [])

  return (
    <div
      className="flex max-sm:justify-center flex-col gap-4 max-sm:gap-0.5 items-start"
    >
      <div
        ref={parent}
        className="pokemon-generation bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
      >
        {
          listOfPokemons.map((pokemon, index) => (
            <PokemonComponent
              key={pokemon.name}
              className="min-w-44 max-sm:min-w-32"
              index={index}
              pokemon={pokemon}
            />
          ))
        }
      </div>
      <div
        ref={parent2}
        className="pokemon-generation bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
      >
        {
          listOfPokemons2.map((pokemon, index) => (
            <PokemonComponent
              key={pokemon.name}
              className="min-w-44 max-sm:min-w-32"
              index={index}
              pokemon={pokemon}
            />
          ))
        }
      </div>
      <div
        ref={parent3}
        className="pokemon-generation bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
      >
        {
          listOfPokemons3.map((pokemon, index) => (
            <PokemonComponent
              key={pokemon.name}
              className="min-w-44 max-sm:min-w-32"
              index={index}
              pokemon={pokemon}
            />
          ))
        }
      </div>
    </div>
  )
}

`
const fileName = 'GroupOfHorizontalListOfPokemons';
---
<PageComponent title={i18n.GROUP_HORIZONTAL_GROUP} framework={framework} vueCode={horizontalListsVueCode} svelteCode={horizontalListSvelteCode} reactCode={horizontalListsReactCode} fileName={fileName}> 
  <fragment slot="vue"> 
    <GroupOfHorizontalListOfPokemonsVue client:load />
  </fragment>
  <fragment slot="svelte">
    <GroupOfHorizontalListOfPokemonsSvelte client:load />
  </fragment>
  <fragment slot="react">
    <GroupOfHorizontalListOfPokemonsReact client:load />
  </fragment>
</PageComponent>
